<template>
    <div class="main customerInfo">
        <form action="" class="info">
            <Row>
                <Col span="6">
                    <div class="form-item">
                        <label for="">姓名:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="6">
                    <div class="form-item">
                        <label for="">地区:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="12">
                    <div class="form-item endCol">
                        <label for="">MSN:</label>
                        <input type="text" :readonly="isReadOnly">
                        <button type="button" @click="isReadOnly = false" v-show="isReadOnly">编辑</button>
                        <button type="button" @click="saveInfo" v-show="!isReadOnly">保存</button>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="6">
                    <div class="form-item">
                        <label for="">性别:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="6">
                    <div class="form-item">
                        <label for="">类别:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="12">
                    <div class="form-item endCol">
                        <label for="">E_mail:</label>
                        <input type="text" :readonly="isReadOnly">
                        <button type="button" @click="isReadOnly = true" v-show="!isReadOnly">取消</button>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="6">
                    <div class="form-item">
                        <label for="">昵称:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="6">
                    <div class="form-item">
                        <label for="">来源:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="12">
                    <div class="form-item endCol">
                        <label for="">公司:</label>
                        <input type="text" :readonly="isReadOnly">
                        <button type="button">客户管理</button>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="6">
                    <div class="form-item">
                        <label for="">生日:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="6">
                    <div class="form-item">
                        <label for="">手机:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="12">
                    <div class="form-item endCol">
                        <label for="">网站:</label>
                        <input type="text" :readonly="isReadOnly">
                        <button type="button">添加跟进</button>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="6">
                    <div class="form-item">
                        <label for="">部门:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="6">
                    <div class="form-item">
                        <label for="">固话:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="12">
                    <div class="form-item endCol">
                        <label for="">地址:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="6">
                    <div class="form-item">
                        <label for="">职务:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="6">
                    <div class="form-item">
                        <label for="">QQ:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
                <Col span="12">
                    <div class="form-item endCol">
                        <label for="">所有者:</label>
                        <input type="text" :readonly="isReadOnly">
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <div class="form-item flex-row endCol">
                        <label for="">备注:</label>
                        <input type="text" class="flex-item" :readonly="isReadOnly">
                    </div>
                </Col>
            </Row>
        </form>
        <div class="creater">
            <Row>
                <Col span="5">
                    <div class="form-item">
                        <label for="">创建者:</label>
                        <span>jack wu</span>
                    </div>
                </Col>
                <Col span="5">
                    <div class="form-item">
                        <label for="">修改者:</label>
                        <span></span>
                    </div>
                </Col>
                <Col span="7">
                    <div class="form-item">
                        <label for="">创建时间:</label>
                        <span>2018-07-09 10:52</span>
                    </div>                    
                </Col>
                <Col span="7">
                    <div class="form-item">
                        <label for="">修改时间:</label>
                        <span>2018-07-09 10:52</span>
                    </div>                    
                </Col>
            </Row>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            isReadOnly: true,
        }
    },
    methods: {
        saveInfo () {//保存

        },
        customerManage () {//客户管理

        },
        addCustomerInfo () {//添加跟进

        }
    },

}
</script>
<style lang="scss" scoped>
.main {
    padding-bottom: 60px;
    position: relative;
    padding-left: 16px;
    padding-top: 16px;

    .info {
        .form-item {
            margin-bottom: 14px;
            height: 24px;
            &.endCol {
                padding-right: 27px;
                input {
                    width: 150px;
                }
            }

            label {
                width: 40px;
                height: 24px;
                line-height: 24px;
                display: inline-block;
                float: left;
            }

            input {
                width: 110px;   
                height: 24px;
                border: solid 1px $c_12;
                border-radius: 2px;
                &.full-width {
                    width: 100%;
                }
            }

            button {
                float: right;
                width: 72px;
                height: 22px;
                border: solid 1px $c_12;
                background-color: $c_34;
                border-radius: 4px;
                color: $c_3;

                &:disabled {
                    border-color: $c_33;
                    background-color: $c_35;
                    color: $c_10;
                }
            }

        }
    }

    .creater {
        position: absolute;
        bottom: 20px;
        left: 0px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: $c_14;     
        padding-left: 16px;           
        
    }

}
</style>

